
<template>
  <div>
    <div v-for="(item, index) in imgArr" :key="index" class="card">
      <div v-if="tabArr.length > 0 && index === 2" class="weui-tab card-shadow">
        <div class="weui-navbar">
          <i class="icon icon-money"></i>
          <ul v-for="(v, i) in tabArr" :key="i" :class="{'weui-bar__item_on': activeIndex === i}" class="weui-navbar__item" @click="tabClick(i)">
            <li class="weui-navbar__title" :class="{'active':activeIndex === i}">{{v.name}}</li>
          </ul>
          <p class="weui-navbar__slider" :class="navbarSliderClass"></p>
        </div>
        <div class="weui-tab__panel">
          <div class="weui-tab__content card-shadow">
            <image lazy-load class="width100" :src="imgArr[activeIndex + 2]" mode="widthFix"  />
          </div>
        </div>
      </div>
      <p v-else-if="tabArr.length > 0 && index === 3" class="none"></p>
      <image v-else lazy-load class="width100" :src="item" mode="widthFix" />
    </div>
    <div class="btn-full-box">
      <view class="btn-full" @tap="hardMake">{{btnText}}</view>
    </div>
  </div>
</template>

<script>
import getBookingImg from '@/interface/picture/getBookingImg'
export default {
  components: { },
  data () {
    return {
      btnText: '',
      tabs: {
        babySitter: [
          {name:'日常照料', value: '0'},
          {name:'老人护理', value: '1'}
        ],
        matron: [
          {name:'26天月嫂', value: '26'},
          {name:'42天月嫂', value: '42'}
        ]
      },
      tabArr: [],
      activeIndex: 0,
      img: '',
      imgObj: {
        hourWorker: {
          name: '小时工',
          bizType: 'hourly_worker_image',
          id: '1108663553738121216'
        },
        parenting: {
          name: '育儿嫂',
          bizType: 'child_parenting_image',
          id: '1108663553738121216'
        },
        matron: {
          name: '月嫂服务',
          bizType: 'maternity_matron_image',
          id: '1108663553738121216'
        },
        babySitter: {
          name: '保姆',
          bizType: 'nanny_image',
          id: '1108663553738121216'
        },
        assart: {
          name: '开荒',
          bizType: 'wasteland_image',
          id: '1108663553738121216'
        }
      },
      imgArr: [
      ]
    }
  },
  computed: {
    navbarSliderClass () {
      return `weui-navbar__slider_${this.activeIndex}`
    }
  },
  methods: {
    hardMake () {
      if(this.checkLogin()){ // 如果未登录会自动跳转
        const query = this.$root.$mp.query
        let url = `/pages/booking/${query.type}/main`
        if(query.type === 'matron'){
          url = url + `?serviceDuration=${this.tabs.matron[this.activeIndex].value}`
        }
        uni.navigateTo({ url })
      }
    },
    tabClick (index) {
      this.activeIndex = index
    },
    setTitle(type){
      const name = this.imgObj[type].name;
      uni.setNavigationBarTitle({
        title: name
      })
      // #ifdef  H5
			document.title = name
			// #endif
    }
  },
  mounted () {
    const type = this.$root.$mp.query.type
    this.setTitle(type)
    if (type === 'hourWorker') {
      this.btnText = '立即预订'
    } else {
      this.btnText = '立即预约'
    }
    this.tabArr = this.tabs[type] || []
    this.activeIndex = 0
    getBookingImg(this.imgObj[type]).then(list => {
      console.log(list)
      this.imgArr = list
    })
  }
}
</script>
<style lang="less">
.card {
  margin-bottom: 30upx;
}
.card .width100 {
  height: auto;
}
.weui-tab {
  margin: 0 26upx;
}
.weui-tab .weui-navbar {
  margin: 0 34upx;
  border-bottom: 2upx solid #eaeaea;
  position: relative;
  width: auto;
}
.weui-tab .weui-navbar .icon-money {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  left: 4upx;
  width: 28upx;
  height: 28upx;
}
.weui-tab .weui-navbar .weui-navbar__item {
  font-size: 60upx;
  line-height: 72upx;
  height: 88upx;
  padding: 0;
  color: #aaa;
}
.weui-tab .weui-navbar .weui-navbar__item.weui-bar__item_on {
  color: #333;
}
.weui-tab .weui-navbar .weui-navbar__slider {
  background-color: #fa4b70;
  bottom: 2upx;
}
.weui-tab .weui-navbar .weui-navbar__slider.weui-navbar__slider_0 {
  left: 86upx;
}
.weui-tab .weui-navbar .weui-navbar__slider.weui-navbar__slider_1 {
  left: 402upx;
}
.weui-tab .weui-tab__panel {
  padding-top: 20upx;
}
</style>